import React, { Component } from 'react'
import "./search.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer' 
import { getApiGlobalSearch } from '../../axios/api' 
import { get } from '../../axios/localstorage'

export default class search extends Component {

    state = {
        type:1,
        list:[{},{},{},{},{}],
        sData:{
            class:[],
            down:[],
            honor:[],
            live:[],
            news:[],
            sign:[],
        },
        class:[],
        classcount:1,
        down:[],
        downcount:1,
        honor:[],
        honorcount:1,
        live:[],
        livecount:1,
        new:[],
        newcount:1,
        signup:[],
        signupcount:1,
        key:"",
    }

    componentWillMount(){

        this.getData();
        this.setState({
            key:get('search')
        })

    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    getNewData=()=>{

        setTimeout(()=>{
            this.getData();
        },50)
    }

    getData=()=>{
        let param = {
            search:get('search'),
            type:get('type')?get('type'):0,
            // content:get('city')?get('city'):get('mechanism')
        }

        getApiGlobalSearch(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    class:data.class,
                    classcount:data.classcount,
                    down:data.down,
                    downcount:data.downcount,
                    honor:data.honor,
                    honorcount:data.honorcount,
                    live:data.live,
                    livecount:data.livecount,
                    new:data.new,
                    newcount:data.newcount,
                    signup:data.signup,
                    signupcount:data.signupcount,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    render() {
        return (
            <div className='search'>
                <Header getNewData={this.getNewData} />
                <div className='page'>
                    <div className='pm'>
                        <div className='phead'>
                            <div className='name'>
                                <h1>全站搜索<span>（{this.state.classcount+this.state.downcount+this.state.honorcount+this.state.livecount+this.state.newcount+this.state.signupcount}）</span></h1>
                            </div>
                            <div className='pbox'>
                                <div className={this.state.type === 1?'pbi pactive':'pbi'} onClick={()=>{this.setState({type:1})}}>
                                    新闻资讯<span>（{this.state.newcount}）</span>
                                    <div className='pspan'></div>
                                </div>
                                <div className={this.state.type === 2?'pbi pactive':'pbi'} onClick={()=>{this.setState({type:2})}}>
                                    课程中心<span>（{this.state.classcount}）</span>
                                    <div className='pspan'></div>
                                </div>
                                <div className={this.state.type === 3?'pbi pactive':'pbi'} onClick={()=>{this.setState({type:3})}}>
                                    直播中心<span>（{this.state.livecount}）</span>
                                    <div className='pspan'></div>
                                </div>
                                <div className={this.state.type === 4?'pbi pactive':'pbi'} onClick={()=>{this.setState({type:4})}}>
                                    活动报名<span>（{this.state.signupcount}）</span>
                                    <div className='pspan'></div>
                                </div>
                                <div className={this.state.type === 5?'pbi pactive':'pbi'} onClick={()=>{this.setState({type:5})}}>
                                    荣誉展示<span>（{this.state.honorcount}）</span>
                                    <div className='pspan'></div>
                                </div>
                                <div className={this.state.type === 6?'pbi pactive':'pbi'} onClick={()=>{this.setState({type:6})}}>
                                    下载专区<span>（{this.state.downcount}）</span>
                                    <div className='pspan'></div>
                                </div>
                            </div>
                        </div>

                        <div className='parr' hidden={this.state.type !== 1}>

                            <div className="none" hidden={this.state.newcount !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无新闻资讯</p>
                            </div>

                            {
                                this.state.new.map((item,index)=>{
                                    return <div className='card' onClick={()=>{this.gotoPage('/newsinfo?id='+item.id+'&typeid=1')}}>
                                                <div className='cimg' style={{backgroundImage:"url('"+item.image_text+"')"}}></div>
                                                <div className='cinfo'>
                                                    <div className='ctext'>
                                                        <h2>{item.title}</h2>
                                                        <span>{item.create_time}</span>
                                                    </div>
                                                    <p>{item.content}</p>
                                                </div>
                                            </div>
                                })
                            }

                        </div>

                        <div className='plist' hidden={this.state.type !== 2}>
                            <div className="none" hidden={this.state.classcount !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无相关课程</p>
                            </div>
                            {
                                this.state.class.map((item,index)=>{
                                    return <div className="item" key={index} onClick={()=>{this.gotoPage('/courseinfo?id='+item.id)}}>
                                                <div className="itop" style={{backgroundImage:"url('"+item.image_text+"')"}}>
                                                </div>
                                                <div className="ibom">
                                                    <h2>{item.title}</h2>
                                                    <p>{item.mtitle}</p>
                                                    <p>{item.tname}老师</p>
                                                    <div className="idiv">
                                                        <div>{item.nums}课时</div>
                                                        <h4>{item.sale_num}人参加</h4>
                                                    </div>
                                                </div>
                                            </div>
                                })
                            }
                        </div>

                        <div className='plist' hidden={this.state.type !== 3}>
                            <div className="none" hidden={this.state.livecount !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无相关直播</p>
                            </div>
                            {
                                this.state.live.map((item,index)=>{
                                    return <div className="item2" key={index} onClick={()=>{this.gotoPage('/liveinfo?id='+item.id)}}>
                                                <div className="itop" style={{backgroundImage:"url('"+item.image_text+"')"}}>
                                                    <div className="imark" >
                                                        <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                    </div>
                                                    <div className="ido" hidden={item.is_open !== 1}>
                                                        <img alt="" src="assets/imgs/do.gif" />
                                                        <p>正在直播中</p>
                                                    </div>
                                                </div>
                                                <div className="ibom">
                                                    <h2>{item.title}</h2>
                                                    <p>{item.mtitle}</p>
                                                    <p>{item.tname}老师</p>
                                                    <div className="idiv">
                                                        <div>{item.start_time?item.start_time+"开始":"暂未设置开始时间"}</div>
                                                        <h4>{item.sale_num}人参加</h4>
                                                    </div>
                                                </div>
                                            </div>
                                })
                            }
                        </div>

                        <div className='parr2' hidden={this.state.type !== 4}>
                            <div className="none" hidden={this.state.signupcount !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无相关活动</p>
                            </div>
                            {
                                this.state.signup.map((item,index)=>{
                                    return <div className='card' >
                                                <div className='imgBox' style={{backgroundImage:"url('"+item.image_text+"')"}}></div>
                                                <div className='cinfo'>
                                                    <h2>{item.title}</h2>
                                                    <div className='ctext'>{item.cont}</div>
                                                    <div className='ctime'>
                                                        <img alt="" src="assets/imgs/shijain.png" />
                                                        <p>{item.createtime}</p>
                                                        <img alt="" src="assets/img/dingwei.png" />
                                                        <p>{item.address}</p>
                                                    </div>
                                                </div>
                                                <button hidden={!item.is_sign} className='btn2'>已报名</button>
                                                <button hidden={item.is_sign} onClick={()=>{this.gotoPage('/signupinfo?id='+item.id)}}>立即报名</button>
                                            </div>
                            
                                })
                            }
                        </div>

                        <div className='plist' hidden={this.state.type !== 5}>
                            <div className="none" hidden={this.state.honorcount !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无相关荣誉</p>
                            </div>
                            {
                                this.state.honor.map((item,index)=>{
                                    return <div className='item3' onClick={()=>{this.gotoPage('/honorinfo?id='+item.id)}}>
                                            <div className='itop' style={{backgroundImage:"url('"+item.image_text+"')"}}></div>
                                            <div className='ibom'>
                                                <h2>{item.title}</h2>
                                                <div className='itext'>{item.summary}</div>
                                            </div>
                                        </div>
                                })
                            }
                        </div>

                        <div className='parr3' hidden={this.state.type !== 6}>
                            <div className="none" hidden={this.state.downcount !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无相关下载</p>
                            </div>
                            {
                                this.state.down.map((item,index)=>{
                                    return <div className='card' key={index}>
                                                <div className='imgBox' style={{backgroundImage:"url('assets/img/wenjian.png')"}}></div>
                                                <h2>{item.title}</h2>
                                                <a className="upload" target="_blank" without rel="noreferrer" href={item.file} name={item.title} download="附件">
                                                    <img alt="" src="assets/img/xiazai.png"/>
                                                    <h4>下载文件</h4>
                                                </a>
                                            </div>
                                })
                            }
                        </div>

                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
